<template>
  <!-- 登录头部 -->
<div class="io-bg">
  <div class="ih-sticky">
    <div class="ih-container">
      <!-- 顶部黑色导航 -->
      <div class="ih-black-bg">
      <div class="ih-info">
        <div @click="changeTab(5)" class="navr" :class="number === 5 ? 'info-active' : ''">我的钱包</div>
        <div @click="changeTab(6)" class="navr" :class="number ===6 ? 'info-active' : ''">帮助中心</div>
        <div class="navr ih-is-login fans6"  @mouseover="listShow=true" @mouseout="listShow=false">
          <!-- 登录前 -->
          <div 
            @click="jumpLogReg(8)" 
            v-if="!token" 
            :class="number === 8 ? 'info-active' : ''"
          >
            登录/注册
          </div>
          <!-- 登录后 -->
          <div 
            @click="goUserItem('/user', 0);changeTab(7)" 
            :class="number === 7 ? 'info-active' : ''"
          >账户管理
          </div>
          <!-- 蒙层 -->
          <div class="ih-xl-list" v-show="listShow && token">
            <div class="ih-xl-item">ID: {{userid}}</div>
            <div class="ih-xl-item" @click="goUserItem('/user', 0)" :class="number === 7 && userIndex === 0 ? 'ih-nav-line-active' : ''">基本信息</div>
            <div class="ih-xl-item" @click="goUserItem('/user/setting', 1)" :class="number === 7 && userIndex === 1 ? 'ih-nav-line-active' : ''">偏好设置</div>
            <div class="ih-xl-item" @click="logout">退出</div>  
          </div>
        </div>
      </div>
      </div>
      <div class="ih-content">
        <div class="ih-logo" @click="loginJump">
          <img src="../assets/images/haoda-logo.png" />
        </div>
        <div class="ih-nav fans">
          <div class="ih-nav-list">
            <div @click="changeTab(1)" class="list-item fans1" :class="number === 1 ? 'active' : ''">我要涨粉</div>
            <div @click="changeTab(2)" class="list-item fans2" :class="number === 2 ? 'active' : ''">多帐号管理</div>
            <div @click="changeTab(3)" class="list-item" :class="number === 3 ? 'active' : ''">我要卖货</div>
            <div @click="changeTab(4)" class="list-item" :class="number === 4 ? 'active' : ''">我要供货</div>
            <div @click="changeTab(10)" class="list-item" :class="number === 10 ? 'active' : ''">爆品情报</div>
            <div @click="changeTab(9)" class="list-item fans4" :class="number === 9 ? 'active' : ''">更多工具</div>
          </div>
        </div>
      </div>
    </div>
  </div>
   <div class="multi-plat-container">
    <div class="multi-plat-wrapper">
      <div class="multi-plat-list">
        <div class="multi-plat-list-left">
          <!-- <div class="multi-plat-item-l" @click="paltManage('/multiPlat/addacut', 1)" :class="multiPlat === 1 ? 'multi-plat-active' : ''">添加帐号</div>
          <div class="multi-plat-item-l" @click="paltManage('/multiPlat/manageAcut', 2)" :class="multiPlat === 2 ? 'multi-plat-active' : ''">管理帐号</div> -->
          <div class="multi-plat-item-l" @click="paltManage(1)" :class="multiPlat === 1 ? 'multi-plat-active' : ''">添加帐号</div>
          <div class="multi-plat-item-l" @click="paltManage(2)" :class="multiPlat === 2 ? 'multi-plat-active' : ''">管理帐号</div>
        </div>
        <div class="multi-plat-list-right">
          <!-- <div class="multi-plat-item-r" @click="paltManage('/multiPlat/accountPreview',3)" :class="multiPlat === 3 ? 'multi-plat-color' : ''">帐号总览</div> -->
          <div class="multi-plat-item-r" @click="paltManage(3)" :class="multiPlat === 3 ? 'multi-plat-color' : ''">帐号总览</div>
          <div class="item">
            <div 
            class="multi-plat-item-r"
            v-for="(item,index) in platName"
            :key="index"
            @click="paltManage(index+4,item.id)" 
            :class="multiPlat === index+4 ? 'multi-plat-color' : '' ">
            {{item.platformName}} — {{item.nickName}}
            </div>
          </div>
        </div>
      </div>
    </div>  
  </div>
  <!-- 新手指引 -->
 
  <!-- 多账号管理 -->
  <v-mask v-show="flag && number===2">
    <v-tooltip-box class="multi-account-manage"  :title="navTitle2">
      <v-circle></v-circle>
      <v-line></v-line>
      <v-tooltip :title="title2">
        <v-star></v-star>
        <v-triangle></v-triangle>
        <div class="control-tooltip jus-layout">
          <div class="next" @click="next(-4)">下一步</div>
          <!-- <div class="stop margin-end" @click="stop(2)">知道了</div> -->
        </div>
      </v-tooltip>
    </v-tooltip-box>
  </v-mask>
      <!-- 多帐号管理-添加帐号 -->
  <v-mask v-show="flag && number===-4">
    <v-tooltip-box  class="multi-add-account" :title="navTitle8">
      <v-circle></v-circle>
      <v-line></v-line>
      <v-tooltip :title="title8">
        <v-star></v-star>
        <v-triangle></v-triangle>
        <div class="control-tooltip jus-layout">
          <div class="next" @click="next(-5)">下一步</div>
          <!-- <div class="stop margin-end" @click="stop()">知道了</div> -->
        </div>
      </v-tooltip>
    </v-tooltip-box>
  </v-mask>
  <!-- 多帐号管理-管理帐号 -->
  <v-mask v-show="flag && number===-5">
    <v-tooltip-box class="multi-manage-account"  :title="navTitle9">
      <v-circle></v-circle>
      <v-line></v-line>
      <v-tooltip :title="title9">
        <v-star></v-star>
        <v-triangle></v-triangle>
        <div class="control-tooltip jus-layout">
          <!-- <div class="next" @click="next(0)">跳过</div> -->
          <div class="stop margin-end" @click="stop(2)">知道了</div>
        </div>
      </v-tooltip>
    </v-tooltip-box>
  </v-mask>
</div>
</template>

<script>
  import Mask from './Mask'
  import TooltipBox from './TooltipBox'
  import Circle from './Circle'
  import Line from './Line'
  import Tooltip from './Tooltip'
  import ImgStar from './ImgStar'
  import Triangle from './Triangle'
  export default {
  components: {
    'v-mask':Mask,
    'v-tooltip-box':TooltipBox,
    'v-circle':Circle,
    'v-line':Line,
    'v-tooltip':Tooltip,
    'v-star':ImgStar,
    'v-triangle':Triangle,
  },
  data() {
    return {
      listShow: false,
      platName: [], //平台名字
      loading:false, //页面加载效果
      platUser: [],
      test:"",
      token:'',
      flag:false,
      screenWidth: '',
      // n:-2, //控制显示tooltip的
      navTitle2:'多账号管理',
      navTitle8:'添加账号',
      navTitle9:'管理帐号',
      title2:'这里可以添加多个快手小店的帐号哦~',
      title8:'点击添加帐号,可绑定快手~',
      title9:'帐号添加成功后,在管理帐号中可看到~',
      userid:''
    }
  },
  computed: { //计算属性
    number() {
      return this.$store.state.interIndex
    },
    userIndex(){
      return this.$store.state.userIndex
    },
    multiPlat(){ //多平台状态切换
      return this.$store.state.multiPlat
    },
    removeUser(){
      return this.$store.state.removeUser
    },
    user(){ //获取到用户的信息
      return this.$store.state.user
    },
  },
  mounted() {
    this.leadShow();
    this.newGuide();
    window.addEventListener('resize',this.newGuide);
    this.token = localStorage.getItem('token');
    this.name = localStorage.getItem('name');
    this.userid = localStorage.getItem('userid');
    this.platformInit();
    this.getAccountList();
    this.platUser =this.$isNull(localStorage.getItem('list')) ? [] : JSON.parse(localStorage.getItem('list')); //拿到平台用户信息
  },
  beforeDestroy(){
    window.removeEventListener('resize',this.newGuide)
  },
  methods: {
    //新手指引
    leadShow(){
      let params =({
        type:this.number
      })
      this.$axios.$post('leadShow',params).then(res => {
        if(res.status === 200 ){
          this.flag = res.obj.isShow;
          // this.flag = true; //暂时打开
        }else{
          this.$message.warning(res.msg);
         }
      })
    },
    //完成引导
    finishLead(){
      let params =({
        type:this.number
      })
      this.$axios.$post('finishLead',params).then(res => {
        this.flag =false;
        if(res.status === 200 ){
          this.flag = false;
        }else{
          this.$message.warning(res.msg)
         }
      })
    },
    newGuide () {
      this.$nextTick (() =>{
        //多账号管理的
        var box2 = document.getElementsByClassName('fans2')[0];
        //导航的相对定位点
        var outer = document.getElementsByClassName('ih-container')[0];
        outer.style.position = "relative";
        box2.offsetParent //多账号管理以父级ih-container参照物为基础
        var boxOffsetLeft2 = box2.offsetLeft; //多账号管理元素的左偏移
        var boxOffsetLeft2 = box2.offsetLeft; //多账号管理元素的左偏移
        //多账号管理
        var maskBox2 = document.querySelector('.multi-account-manage')
        maskBox2.style.position = 'absolute';
        maskBox2.style.left=( boxOffsetLeft2-15)+'px';
        maskBox2.style.zIndex = 10000;
      })
    },
     // 新手指引 跳过（下一页）
    next (index) {
      //最终的写法：
      //  this.n = index;
     this.$store.commit('setInterIndex',index)
     if(index === -4) {
       this.flag = true;
     }else if (index === -5) {
       this.flag = true;
     }
    },
    // 新手指引 知道了
    stop (index) { //知道了也掉一个接口，传递一个type即可
      // this.flag = false;
      //最终的写法：
      // this.n = index;
      this.$store.commit('setInterIndex',index);
      this.finishLead();
    },
    changeTab(index) {
      this.$store.commit('setInterIndex',index);
      if (index === 1) {//我要涨粉
        this.$router.push('/myAddFans');
        this.leadShow();
        this.newGuide();
      } else if (index === 2) {//多账号管理
        this.$router.push('/multiPlat/accountPreview');
        this.leadShow();
        this.newGuide();
      } else if (index === 3) {//我要卖货
        this.$router.push('/pickGoodsHall');
        this.leadShow();
        this.newGuide();
      } else if (index === 4) { //我要供货
        this.$router.push('/providegoods/manage');
        this.leadShow();
        this.newGuide();
      } else if (index === 5) { //我的钱包
        this.$router.push('/wallet');
        this.leadShow()
        this.newGuide();
      } else if (index === 6){ //帮助中心
        this.$router.push('/help');
        // this.leadShow()
        // this.newGuide();
      } else if(index===7){
        this.leadShow();
        this.newGuide();
      } else if(index===9){
        this.$router.push('/moreTools');
        this.leadShow();
        this.newGuide();
      }else if(index ===10){ //爆品情报
        this.$router.push('/hotSystem')
      }
    },
    loginJump(){
      this.$router.push({
        path:'/'
      })
    },
    jumpLogReg (index) {
      this.$store.commit('setInterIndex',index);
      if(index ===8 ) {
        this.$router.replace('/login')
      }
    },
    goUserItem(url, index) {
      this.listShow = false
      this.$store.commit('setUserIndex',index)
      this.go(url)//编程式导航
    },
    //进入绑定平台
    paltManage(index, id) {
      this.$store.commit('setMultiPlat',index)
      // if (index >= 4) {
      //   for(let i = 0; i < this.platUser.length; i++){
      //     if(id === this.platUser[i].id){ //id ===id
      //       localStorage.setItem('ksAccount',JSON.stringify(this.platUser[i]))
      //     }
      //   }
      // }
      if(index === 1) {
        // this.n = 8;
        // this.flag = true;
        this.go('/multiPlat/addAcut')
      } else if (index === 2){
        // this.n = 9;
        // this.flag = true;
        this.go('/multiPlat/manageAcut')
      } else if(index === 3) {
        this.go('/multiPlat/accountPreview')
      } else if(index >=4) {
        for(let i = 0; i < this.platUser.length; i++){
          if(id === this.platUser[i].id){ //id ===id
            localStorage.setItem('ksAccount',JSON.stringify(this.platUser[i]))
          }
        }
        this.go('/multiPlat/kuaishou/manage')
      }
    },  
    logout() { // 注销
      this.$logout() //清除token
      this.$store.commit('user/setUser', { 
        userid: '',
        token: '',   
        name: '',   
        auth: false, //区分是否登录  true登录
      })
      //清除ksAccount对象 和list数组
      localStorage.removeItem('list');
      localStorage.removeItem('ksAccount');
      this.go('/')
    },
    platformInit() {	//平台信息初始化
      this.loading = true
			this.$axios.$post('platformInit').then(res => {
        this.loading = false
				if(res.status === 200 ){
          this.platName = res.obj; //拿到平台名称
          // console.log('this.platName',this.platName)
          if (!this.$isNull(res.obj)) {
            localStorage.setItem('list',JSON.stringify(res.obj));//存的时候存成字符串 //这个还不能注销
          }
				}else{
          // if(this.test){
          //   this.test.close()
          // }
          // this.test = this.$message({
          //   message:res.msg,
          //   type:'warning',
          //   duration:800,
          // })
				}
			})
				.catch(error => {
          if(this.test){
            this.test.close()
          }
          this.test = this.$message.warning('请求失败')
          this.loading = false;
				})
    },
      //拿到shopID 和平台ID
    getAccountList() {
      // let _this = this;
      this.$axios.$post('accountList').then(res => {
        if(res.status === 200){
          for(let i in res.obj){
            if(res.obj[i].shopId === this.platName[i].shopId){
							this.$store.commit('setKsAccount1',this.platName[i])
            }
          }
        }else{
          this.$message({
            message:res.msg, 
            type:'warning',
          })
         }
      })
      .catch(err => {
        this.$message({
          message:'请求失败',  
          type:'warning'
        })
      })
    },
  },
}
</script>

<style scoped>
  .control-tooltip {
    position:absolute;
    top: 84px;
    left:40px;  
    z-index:1000;
  }
  .jus-layout {
    display:flex;
  }
  .jus-layout .margin-end {
    /* margin-left:20px;  */
  }
  .control-tooltip .next,
  .control-tooltip .stop{
    width:92px;
    height:34px;
    line-height:34px;
    text-align:center;
    box-sizing:border-box;
    color:#ffffff;
    border-radius:17px;
    cursor: pointer;
  }
  .control-tooltip .next {
    border:1px solid #ffffff;
  }
  .control-tooltip .next:hover {
    border:1px solid #0096e6;
    background:#0096e6;
  }
  .control-tooltip .stop {
    background:#ffffff;
    color:#0096e6;
  }
  .control-tooltip .stop:hover {
    background:#0096e6;
    color:#ffffff;
  }
  /* 连麦 */
  .vertical-btn {
    top: 220px;
    left: -44px;
  }
  .vertical-btn .stop {
    margin-top:20px;
  }
  .io-bg{
    min-width: 1200px;
  }
  @media screen and (max-width:1200px) {
    .io-bg{
      width:1200px;
    }
  }
  .ih-sticky{
    width:100%;
    height: 120px;
    background: #fff;
    box-shadow: 1px 2px 2px #f5f5f4;
    position: sticky;
    top: 0;
    left:0;
    right:0;
    z-index: 99;
  }
  .ih-container {
    width:100%;
    height: 120px;
    background: #fff;
    box-shadow: 1px 2px 2px #f5f5f4;
    position: sticky;
    top: 0;
    z-index: 99;
  }
  /* 顶部黑色背景 */
  .ih-black-bg{
    display:flex;
    justify-content: flex-end;
    align-items:center;
    height:40px;
    line-height: 40px;
    background-color: #333333;
    color:#b8b8b8;
  }
  .ih-black-bg .ih-info{
    display:flex;
    margin-right:6%;
    cursor: pointer;
  }
  .ih-black-bg .ih-info .navr{
    margin:0 30px;
  } 
  .ih-is-login{
    height:40px;
    line-height: 40px;
  }
  .ih-black-bg .ih-info .info-active{
    color:#0096e6;
  }
  .ih-content {
    width:100%;
    display: flex;
    height: 80px;
    align-items: center;
    background-color:#ffffff;
  }
  .ih-logo {
    width: 321px;
    height: 29px;
    margin-left:20px;
  }
  .ih-logo img {
    width: 321px;
    height: 29px;
  }
  .ih-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 8%;
    margin-top:35px;
    width:42%;
  }
  
  @media screen and (min-width: 1400px){
    .ih-nav{
      margin-left:8%;
    }
  } 
  @media screen and (max-width: 1200px){
    .ih-nav{
      margin-left:8%;
    }
  } 
  .ih-nav-list {
    display: flex;
    min-width: 397px;
    height:46px;
  }
  .ih-nav-list .list-item {
    flex:1;
    text-align: center;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    width: 80px;
    white-space: nowrap;
    user-select:none;
    margin-right:10%;
  }
  .ih-nav-list .active {
    color: #0096e6 !important;
    border-bottom:4px solid #0096e6 !important;
  }
  @media screen and (min-width:1400px){
    .ih-nav-list .list-item{
      margin-right:14%;
    }
  }
  @media screen and (max-width:1200px){
    .ih-nav-list .list-item {
      text-align: center;
      font-size: 16px;
      color: #333;
      cursor: pointer;
      width: 80px;
      white-space: nowrap;
      user-select:none;
      margin-right:10%;
    }
  }
  .ih-nav-line {
    width: 64px;
    height: 3px;
    background: #0096e6;
    position: absolute;
    bottom: -30px;
    margin-left:0px;
    transition: all ease-out .3s;
  }
  .ih-xl-list {
    background: #fff;
    position: absolute;
    width: 150px;
    right: 33px;
    top: 38px;
    z-index: 9;
    box-shadow: 1px 1px 5px #888;
    border-radius: 5px;
  }
  .ih-xl-item {
    height: 39px;
    line-height: 39px;
    border-bottom: 1px solid #f4f4f4;
    padding-left: 27px;
    color: #333333;
    font-size: 14px;
  }
  .multi-plat-wrapper{
    width:100%;
    background:#fff;
    height:61px;
  }
  .multi-plat-item{
    font-size:14px;
    color:#333;
    padding:12px 26px;
  }
  .multi-plat-active{
    font-size:14px;
    color:#fff;
    border-radius:15px;
    cursor:pointer;
    user-select:none;
    border:none;
    outline:none;
    background:#0096e6;
  }
  .multi-plat-container{
    width:100%;
    height:61px;
    background: #fefefe;
    display:flex;
    box-shadow: 0px -4px 5px #f4f4f4;
  }
  .multi-plat-list{
    height:61px;
    display:flex;
    align-items:center;
    padding-left:20px;
  }
  .multi-plat-list-left,.multi-plat-list-right{
    display:flex;
    user-select:none;
    cursor:pointer;
  }
  .multi-plat-list-right{
    padding-left:48px;
  }
  .multi-plat-item-l{
    font-size:14px;
    color:#333;
    cursor:pointer;
    letter-spacing:.5px;
    width:110px;
    height:36px;
    line-height:36px;
    text-align:center;
  }
  .multi-plat-item-r{
    padding-right:50px;
    white-space:nowrap;
  }
  .multi-plat-active{
    font-size:14px;
    font-weight:400;
    color:#fff;
    border-radius:20px;
    cursor:pointer;
    user-select:none;
    border:none;
    outline:none;
    background:#0096e6;
  }
  .multi-plat-color{
    color:#0096e6
  }
  .item{
    display:flex;
  }
  .multi-add-account,
  .multi-manage-account {
    width:110px;
    height:40px;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    border-radius: 20px;
    cursor: pointer;
    user-select: none;
    border: none;
    outline: none;
    background: #0096e6;
    margin:0;
  }
  .multi-add-account {
    /* 加上40px */
    top:130px; 
    left:20px;
  }
  .multi-manage-account {
    /* 加上40px */
    top:130px; 
    left:130px;
  }
  .center {
    margin-top: -9px;
    /* margin-left: 225px; */
  }
</style>
